<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-select
          v-model="searchInfoMations.type"
          style="width:120px;"
          class="margin3"
          clearable
          placeholder="标签类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button v-if="accreditChildren.createLabel" type="primary" @click="jump('create')">搜 索</el-button>
      </div>
      <el-button class="right" type="primary" @click="openDialog('create')">新建标签</el-button>
    </div>
    <el-table ref="table" :height="this.$getTableHeight" :data="tableData" stripe border>
      <el-table-column show-overflow-tooltip label="标签名">
        <template slot-scope="scope">{{ scope.row.id ? scope.row.label:'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="color" label="颜色" />
      <el-table-column show-overflow-tooltip prop="type" label="标签类型" />
      <el-table-column show-overflow-tooltip label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.editor"
              type="primary"
              style="color:#409eff;margin-right:10px;"
              @click="openDialog(scope.row)"
            >编辑</span>
            <span
              v-if="accreditChildren.deleteLabel"
              type="danger"
              style="color:#f56c6c;margin-right:10px;"
              @click="deleteInforMathion(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog
      :title="isCreate ? '创建标签' :'编辑标签'"
      center
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="标签名" prop="label">
          <el-input v-model="form.label" autocomplete="off" />
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-input v-model="form.color" autocomplete="off" />
        </el-form-item>
        <el-form-item label="标签类型" prop="type">
          <el-select v-model="form.type" clearable placeholder="标签类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitVal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '~/components/commom/pagination'
import regular from '~/utils/regular'
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from '~/utils/util'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      accreditChildren: {},
      isCreate: true,
      dataId: null,
      dialogVisible: false,
      totalCount: 0,
      tableData: [],
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      searchInfoMations: {
        type: 0,
        keyword: ''
      },
      copySearchInfoMations: {
        type: 0,
        keyword: ''
      },
      form: {
        label: null,
        color: null,
        type: null
      },
      rules: {
        label: regular.require,
        color: regular.require,
        type: regular.requireChange
      },
      options: [
        {
          label: '商机',
          value: 0
        }
      ]
    }
  },
  mounted() {
    this.getInitTableDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    submitVal() {
      this.$refs['form'].validate(v => {
        if (v) {
          this.$post({
            url: this.isCreate
              ? '/manage/label/createLabel'
              : '/manage/label/editLabel',
            data: {
              item: {
                id: this.isCreate ? '' : this.dataId,
                color: this.form.color,
                label: this.form.label,
                type: this.form.type
              }
            }
          }).then(() => {
            this.$refs['form'].resetFields()
            this.form = {}
            this.dialogVisible = false
            this.dataId = null
          })
        }
      })
    },
    openDialog(res) {
      this.dialogVisible = true
      if (!(res === 'create')) {
        this.form = JSON.parse(JSON.stringify(res))
        this.dataId = res.id
        this.isCreate = false
        return false
      }
      this.isCreate = true
      this.dataId = null
    },
    handleClose() {
      this.$refs['form'].resetFields()
      this.form = {}
      this.dialogVisible = false
    },
    getInitTableDate() {
      this.$post({
        url: '/manage/label/pageLoad',
        data: {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 20,
            skipCount: 0
          },
          type: 0
        }
      }).then(res => {
        this.totalCount = res.items.totalCount
        this.tableData = res.items.items
        changeTableHeight(this)
      })
    },
    searchInfoMation(res) {
      this.copySearchInfoMations = JSON.parse(
        JSON.stringify(this.searchInfoMations)
      )
      const result = _searchInfo(res, this.page, this.copySearchInfoMations)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable('/manage/label/getLabel', res, that)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfoMations)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfoMations)
      this.changeTableData(result)
    },
    deleteInforMathion(row) {
      const that = this
      _deleteMethods('/manage/label/deleteLabel', row, that).then(() => {
        that.searchInfoMation('no')
      })
    }
  }
}
</script>

<style>
.left {
  float: left;
}
.right {
  float: right;
}
</style>
